<template>
  <div class="rectification">
    <div class="template-container">
      <CustomTitle title="售后分类配置" />
      <div class="template-button-container">
        <div
          v-for="(item, i) in list"
          :key="item"
          @click="handeleActive(i)"
          :class="activeIndex === i ? 'active button' : 'button'"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="rectification-type">
      <div class="tree-menu">
        <div class="tree-menu-box">
          <TectificationTree
            v-model:value="standardId"
            :defaultUnfold="defaultUnfold"
            @change="changeTree"
            :treeData="templateTree"
            :field="treeFieldNames"
            v-if="templateTree.length"
          >
            <template #default="{ node }">
              <div class="tree-node-label" @click="handelClickTreeNode(node)">
                <span v-ellipsis="{ rows: 1, text: node.reformTypeName }" />
              </div>
            </template>
            <template #option-icon="{ node, level }">
              <div class="tree-node-buttons">
                <icon-plus size="16" v-if="level !== 3" @click="handelAddNode(node, level)" />
                <GiSvgIcon name="rectification-del" size="16" @click="handelDelType(node)" />
              </div>
            </template>
          </TectificationTree>
          <a-empty v-else />
        </div>
        <div class="add-button">
          <a-button type="primary" @click="handleAddType">
            <template #icon>
              <icon-plus />
            </template>
            添加{{ nameTitle }}分类
          </a-button>
        </div>
      </div>
      <div class="standard-container">
        <a-form v-if="isShowStandard" :model="standardForm" ref="formRef">
          <div class="standard-container-configuration">
            <CustomTitle :title="nameTitle + '配置'" :is-icon="false" />
            <div>（{{ nameTitle }}的配置和申请标准需要配置在最末级分类，配置后才可以发起{{ nameTitle }}时选择分类）</div>
          </div>
          <div class="top-form">
            <a-form-item
              label="是否必须业主确认"
              field="isConfirm"
              :rules="[{ required: true, message: '请选择是否必须业主确认' }]"
            >
              <a-radio-group v-if="isShowSave" v-model="standardForm.isConfirm">
                <a-radio :value="true">必须</a-radio>
                <a-radio :value="false">由发起人选择</a-radio>
              </a-radio-group>
              <div v-else>{{ standardForm.isConfirm ? "必须" : standardForm.isConfirm === null ? "" : "由发起人选择" }}</div>
            </a-form-item>
            <a-form-item
              :label-col-props="{ span: 5.5 }"
              :wrapper-col-props="{ span: 10 }"
              label="是否首次收款后开展任务和核量"
              field="afterPay"
              :rules="[{ required: true, message: '请选择是否首次收款后开展任务和核量' }]"
            >
              <a-radio-group v-if="isShowSave" v-model="standardForm.afterPay">
                <a-radio :value="true">必须</a-radio>
                <a-radio :value="false">由发起人选择</a-radio>
              </a-radio-group>
              <div v-else>{{ standardForm.afterPay ? "必须" : standardForm.afterPay === null ? "" : "由发起人选择" }}</div>
            </a-form-item>
            <a-form-item
              :label="'该分类的' + nameTitle + '模板'"
              field="packageIds"
              :rules="[{ required: true, message: '请选择' }]"
            >
              <a-select
                v-if="isShowSave"
                v-model="standardForm.packageIds"
                :style="{ width: '100%', backgroundColor: '#f2f3f5' }"
                placeholder="请选择"
                multiple
              >
                <a-option
                  v-for="item in templateList"
                  :key="item.packageId"
                  :label="item.packageName"
                  :value="item.packageId"
                ></a-option>
              </a-select>
              <div v-else>
                <span style="margin-right: 10px" v-for="item in standardForm.taskPackageList" :key="item.packageId">{{
                  item.packageName
                }}</span>
              </div>
            </a-form-item>
          </div>
          <div class="line-content"></div>
          <div class="app-container">
            <CustomTitle :title="'判责规则'" :is-icon="false" style="margin-bottom: 20px" />
            <div class="Judgment-concontainer">
              <div class="name-header">
                <a-form-item
                  field="judgment"
                  :rules="[{ required: true, message: '请选择判责金额取值' }]"
                  style="margin: 0"
                  label="判责金额取值"
                >
                  <a-select
                    :disabled="!isShowSave"
                    v-model="standardForm.judgment"
                    placeholder="请选择"
                    :style="{ width: '200px' }"
                    style="background: #ffffff"
                  >
                    <a-option :value="1">成本价</a-option>
                    <a-option :value="2">销售价（按合同折扣价算）</a-option>
                  </a-select>
                  <a-tooltip
                    content="判责金额包含给客户赔偿金额和预算报价变更单的费用"
                    position="bottom"
                    background-color="#ffffff"
                    :content-style="{ color: '#4E5969' }"
                  >
                    <img style="width: 16px; height: 16px; margin-left: 10px" src="@/assets/images/illustrate.png" alt="" />
                  </a-tooltip>
                </a-form-item>
                <div @click="handleAddPerson" class="Judgment-add" v-if="isShowSave">
                  <icon-plus-circle style="width: 12px; height: 12px; color: #007dff; margin-right: 5px" />
                  <span>新增责任人</span>
                </div>
              </div>
              <a-table
                v-if="standardForm.rulesVOList.length > 0"
                :data="standardForm.rulesVOList"
                :pagination="false"
                :show-header="false"
                :bordered="false"
                class="Judgment-table"
              >
                <template #columns>
                  <a-table-column title="合作方类型" tooltip ellipsis data-index="partnerType">
                    <template #cell="{ record, rowIndex }">
                      <a-form-item :rules="[requiredRule]" :field="`rulesVOList[${rowIndex}].partnerType`" label="合作方类型">
                        <a-select
                          :disabled="!isShowSave"
                          @change="record.partnerRoleId = ''"
                          placeholder="请选择"
                          v-model="record.partnerType"
                        >
                          <a-option :value="7">员工</a-option>
                          <a-option :value="2">供应商</a-option>
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="责任人角色" tooltip ellipsis data-index="partnerRoleId">
                    <template #cell="{ record, rowIndex }">
                      <a-form-item
                        v-if="record.partnerType === 7"
                        :rules="[{ required: record.partnerType === 7, message: '此项为必选项', trigger: 'change' }]"
                        :field="`rulesVOList[${rowIndex}].partnerRoleId`"
                        label="责任人角色"
                      >
                        <a-select
                          :disabled="!isShowSave || record.partnerType === 2"
                          :placeholder="record.partnerType === 7 ? '请选择' : ''"
                          v-model="record.partnerRoleId"
                        >
                          <a-option :value="item.roleId" v-for="item in allRole" :key="item.roleId"
                            >{{ item.roleName }}
                          </a-option>
                        </a-select>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column title="承担比例（%）" tooltip ellipsis data-index="bearProportion">
                    <template #cell="{ record, rowIndex }">
                      <a-form-item :rules="[requiredRule]" :field="`rulesVOList[${rowIndex}].bearProportion`" label="承担比例">
                        <a-input-number
                          :disabled="!isShowSave"
                          v-model="record.bearProportion"
                          :placeholder="isShowSave ? '请输入' : ''"
                          class="input-demo"
                          :min="1"
                          :max="100"
                          :precision="0"
                        >
                          <template #suffix> %</template>
                        </a-input-number>
                      </a-form-item>
                    </template>
                  </a-table-column>
                  <a-table-column v-if="isShowSave" title="操作" tooltip ellipsis data-index="proportion" width="50">
                    <template #cell="{ record, rowIndex }">
                      <IconDelete @click="handleDelete(rowIndex, record)" style="cursor: pointer" />
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </div>
          </div>
          <div class="line-content"></div>
          <div class="app-container">
            <CustomTitle :title="nameTitle + '申请标准'" :is-icon="false" />
          </div>
          <div class="standard-form app-container">
            <a-form-item label="标准说明" field="standardDesc" :rules="[{ required: true, message: '请输入标准描述' }]">
              <a-textarea
                v-if="isShowSave"
                placeholder="请输入标准描述"
                :auto-size="{ minRows: 3 }"
                style="background-color: #f2f3f5"
                v-model="standardForm.standardDesc"
              ></a-textarea>
              <div v-else>{{ standardForm.standardDesc }}</div>
            </a-form-item>
            <a-form-item label="标准图片">
              <div class="file-list-container">
                <div class="image-list" ref="parent">
                  <div class="img-container" ref="imgContainer">
                    <div v-for="(item, index) in picUrls" :key="item.fileId" class="img-container-item">
                      <a-image-preview-group infinite>
                        <a-image :src="item.fileUrl" width="100%" height="100%" fit="cover" />
                      </a-image-preview-group>
                      <div v-if="isShowSave" class="del-button" @click="handelDelImg(index)">
                        <icon-close />
                      </div>
                    </div>
                    <div v-if="picUrls?.length < 9 && isShowSave">
                      <a-upload
                        :custom-request="(customRequestUpload as any)"
                        multiple
                        :file-list="picUrls"
                        :show-file-list="false"
                        :accept="imageAccept"
                        :limit="9"
                        @exceed-limit="
                          () => {
                            Message.error('最多上传9张图片');
                          }
                        "
                      >
                        <template #upload-button>
                          <div class="upload-card upload-tip">
                            <icon-plus size="24" />
                            点击上传
                          </div>
                        </template>
                      </a-upload>
                    </div>
                  </div>
                </div>
                <span class="upload-tip">只能上传jpg/png，且不超过10M，最大支持上传9张</span>
              </div>
            </a-form-item>
            <a-form-item label="标准视频">
              <div class="file-list-container">
                <a-upload
                  v-if="videoUrls.length < 6 && isShowSave"
                  class="custom"
                  style="flex: 1"
                  :file-list="videoUrls"
                  :custom-request="(customRequestVideoUpload as any)"
                  multiple
                  :show-file-list="false"
                  :accept="videoAccept"
                  :limit="6"
                  @exceed-limit="
                    () => {
                      Message.error('最多上传6个视频');
                    }
                  "
                >
                  <template #upload-button>
                    <a-spin
                      :loading="loading && videoUrls.length <= 0"
                      style="width: 100%; background-color: transparent !important"
                      tip="视频上传中..."
                      dot
                    >
                      <div class="upload-video-card">
                        <icon-upload size="11" />
                        点击上传
                      </div>
                    </a-spin>
                  </template>
                </a-upload>
                <div class="carousel" v-if="videoUrls?.length">
                  <a-spin
                    :loading="loading"
                    style="width: 100%; background-color: transparent !important"
                    tip="视频上传中..."
                    dot
                  >
                    <div class="carousel-container" ref="videoContainer">
                      <div v-for="(item, index) in videoUrls" :key="item.fileId" class="carousel-container-item">
                        <video :src="item.fileUrl"></video>
                        <GiSvgIcon name="play-icon" size="22" color="#fff" @click="handlePreview(item.fileUrl)" />
                        <div v-if="isShowSave" class="del-button" @click="handelDelVideo(index)">
                          <icon-close />
                        </div>
                      </div>
                    </div>
                  </a-spin>
                </div>
                <div class="upload-tip">只能上传 avi/mov/mp4/wmv 文件格式，单个不超过200MB，最大支持6个</div>
              </div>
            </a-form-item>
          </div>
        </a-form>
        <a-empty description="请选择第末级分类" v-else />
        <div class="btn" v-if="isShowStandard && isShowSave">
          <a-button style="width: 92px" type="primary" @click="handelSave">保存</a-button>
        </div>
      </div>

      <!--  视频预览 start  -->
      <!--  TODO：结合文件上传 封装组件  -->
      <a-modal :visible="isPreview" width="50vw" unmount-on-close :closable="false" :footer="false">
        <CustomTitle title="视频预览" isClose @close="isPreview = false" />
        <video
          v-if="isPreview"
          :src="previewVideoUrl"
          controls
          style="width: 100%; height: 50vh; object-fit: cover; margin-top: 20px"
        ></video>
      </a-modal>
      <!--  视频预览 end  -->

      <!--  新增分类 start  -->
      <a-modal
        :visible="isAddType"
        @ok="handleAddTypeOk"
        @cancel="handleAddTypeCancel"
        width="486px"
        unmount-on-close
        :mask-closable="false"
        :closable="false"
      >
        <CustomTitle title="新增分类" />
        <div class="add-type-modal">
          <a-form :model="typeForm" :rules="typeFormRules" ref="typeFormRef">
            <a-form-item label="上级分类" v-show="isShowParentsType">
              <a-input placeholder="上级分类" disabled v-model.trim="typeForm.parentsType" />
            </a-form-item>
            <a-form-item field="reformTypeName" label="分类名称">
              <a-input placeholder="请输入分类名称" v-model.trim="typeForm.reformTypeName" />
            </a-form-item>
            <div v-show="isShowParentsType" style="color: rgb(244 62 62)">
              注:若该上级分类已录入配置和标准，会自动带入到新的子分类
            </div>
          </a-form>
        </div>
        <template #footer>
          <a-button style="width: 92px; background-color: #f2f3f5" @click="handleAddTypeCancel">取消</a-button>
          <a-button style="width: 92px" type="primary" @click="handleAddTypeOk">确定</a-button>
        </template>
      </a-modal>
      <!--  新增分类 end  -->

      <!--  删除分类 start  -->
      <a-modal
        :visible="isShowDelModal"
        okText="确定"
        cancelText="取消"
        width="500px"
        :mask-closable="false"
        unmountOnClose
        :closable="false"
      >
        <div class="modal-message">
          <div class="modal-message-icon">
            <img :src="DelTypeIcon" />
          </div>
          <div class="modal-message-tip">是否删除该分类及其子级？注意删除后已编辑的标准也一并删除了！</div>
        </div>
        <template #footer>
          <a-button style="width: 92px; background-color: #f2f3f5" @click="handleDelCancel">取消</a-button>
          <a-button style="width: 92px" type="primary" @click="handleDelOk">确定</a-button>
        </template>
      </a-modal>
      <!--  删除分类 end  -->
    </div>
  </div>
</template>

<script setup lang="ts">
import CustomTitle from "@/components/CustomTitle/index.vue";
import DelTypeIcon from "@/assets/images/type-del-icon.png";
import TectificationTree from "./components/rectificationTree/index.vue";

const list = ref(["整改", "增减项"]);
const nameTitle = ref("整改");
const activeIndex = ref(0);
const allRole = ref([]);
const ruleIds = ref([]); // 删除判责规则ID

import { getCurrentInstance, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import dayjs from "dayjs";
import type { fileObj } from "./types";
import {
  addRectificationType,
  rectificationTypeTree,
  delRectificationType,
  rectificationTypeTransfer,
  addRectificationTypeStandard,
  getAllRole
} from "@/apis";
import type { AddTypeNodeParams, RectificationTypeTreeItem, AddTypeStandardParams } from "@/apis";
import useMultipartOssStore from "@/stores/modules/multipartOssStore";
import { getSuffix, getFileName, findFirstLevelId } from "./utils";
import * as templateApi from "@/apis/rectificationTemplate";

const { proxy }: any = getCurrentInstance();
const ossStore = useMultipartOssStore();

const treeFieldNames = {
  key: "reformTypeId",
  title: "reformTypeName",
  children: "children"
};
const requiredRule = {
  required: true,
  message: "此项为必选项",
  trigger: "change"
};
const standardId = ref("");
const defaultUnfold = ref<string[]>([]);
const isShowStandard = ref(false);
const isShowSave = ref(true);
const loading = ref(false);
const templateTree = ref<RectificationTypeTreeItem[]>([]);
const templateList = ref<object[]>([]);
const standardForm = ref<AddTypeStandardParams>({
  standardDesc: "",
  picUrls: "",
  picIds: "",
  videoUrls: "",
  videoIds: "",
  packageIds: [],
  rulesVOList: []
});
// 切换 tabs
const handeleActive = i => {
  activeIndex.value = i;
  nameTitle.value = i === 0 ? "整改" : "增减项";
  templateList.value = [];
  isShowSave.value = true;
  initForm();
  initPage();
  getRectificationTypeTree(null);
};

const initPage = async () => {
  const { data } = await templateApi.listTemplate({
    packageType: nameTitle.value === "整改" ? 1 : 3
  });
  templateList.value = data ?? [];
};
initPage();

const getRectificationTypeTree = async (val: any) => {
  const { data } = await rectificationTypeTree({
    afterSalesType: nameTitle.value == "整改" ? 1 : 3
  });
  templateTree.value = data ?? [];
  if (templateTree.value.length > 0) {
    standardId.value = val ? val : findFirstLevelId(templateTree.value);
    if (standardId.value) {
      await getStandardDetail(standardId.value);
      isShowStandard.value = true;
    }
  } else {
    delDataId.value = "";
    isShowStandard.value = false;
  }
};
const handelDetailData = (data: any) => {
  const picUrls = data.picUrls ? data.picUrls.split(",") : [];
  const picIds = data.picIds ? data.picIds.split(",") : [];
  const videoUrls = data.videoUrls ? data.videoUrls.split(",") : [];
  const videoIds = data.videoIds ? data.videoIds.split(",") : [];
  const picData = picUrls.map((item: any, index: number) => {
    return {
      fileUrl: item,
      fileName: getFileName(item),
      fileId: picIds[index]
    };
  });
  const videoData = videoUrls.map((item: any, index: number) => {
    return {
      fileUrl: item,
      fileName: getFileName(item),
      fileId: videoIds[index]
    };
  });
  return { videoData, picData };
};
const getStandardDetail = async (id: string) => {
  const { data } = await rectificationTypeTransfer(id);
  if (data) {
    data.rulesVOList && data.rulesVOList.map(item => (item.bearProportion = Number(item.bearProportion)));
    standardForm.value = {
      ...data,
      packageIds: data.packageIds?.split(",")
    };
    picUrls.value = handelDetailData(data).picData;
    videoUrls.value = handelDetailData(data).videoData;
  }
};
const changeTree = async (e: any) => {
  await proxy.$refs.formRef?.resetFields();
  initForm();
  getStandardDetail(e);
};
const initForm = () => {
  standardForm.value = {
    standardDesc: "",
    picUrls: "",
    picIds: "",
    videoUrls: "",
    videoIds: "",
    packageIds: [],
    rulesVOList: []
  };
  picUrls.value = [];
  videoUrls.value = [];
  ruleIds.value = [];
};
// 暂时不用
const handelClickTreeNode = async (node: any) => {
  if (node.children && node.children.length > 0) {
    isShowStandard.value = true;
    isShowSave.value = false;
    initForm();
    // getStandardDetail(node.reformTypeId);
  } else {
    isShowSave.value = true;
  }
};

/**
 * 新建分类
 */
const isAddType = ref(false);
const isShowParentsType = ref(false);
const initTypeForm = {
  parentId: 0,
  parentsType: "",
  reformTypeName: ""
};
const typeForm = ref<AddTypeNodeParams>({ ...initTypeForm });
const typeFormRules = {
  reformTypeName: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { maxLength: 30, message: "请输入30个字符以内", trigger: "blur" }
  ]
};
const addLevel = ref(0);
const handleAddType = () => {
  isShowParentsType.value = false;
  isAddType.value = true;
};
const handelAddNode = (node: any, level: number) => {
  typeForm.value.parentsType = node.reformTypeName;
  typeForm.value.parentId = node.reformTypeId;
  isShowParentsType.value = true;
  isAddType.value = true;
  addLevel.value = level;
};
const handleAddTypeOk = async () => {
  const valid = await proxy.$refs.typeFormRef?.validate();
  if (valid) return;
  const { data } = (await addRectificationType({
    ...typeForm.value,
    afterSalesType: nameTitle.value == "整改" ? 1 : 3
  })) as any;
  const { data: treeData } = await rectificationTypeTree({
    afterSalesType: nameTitle.value == "整改" ? 1 : 3
  });
  templateTree.value = treeData ?? [];
  standardId.value = data?.reformTypeId;
  if (addLevel.value === 2) {
    isShowStandard.value = true;
  }
  handleAddTypeCancel();
  initForm();
  getRectificationTypeTree(standardId.value);
  Message.success("新增成功");
};
const handleAddTypeCancel = () => {
  typeForm.value = { ...initTypeForm };
  isAddType.value = false;
  isShowParentsType.value = false;
  addLevel.value = 0;
};

/**
 * 删除分类
 */
const isShowDelModal = ref(false);
const delDataId = ref("");
const handelDelType = (node: any) => {
  delDataId.value = node.reformTypeId;
  isShowDelModal.value = true;
};
const handleDelOk = async () => {
  await delRectificationType(delDataId.value);
  Message.success("删除成功");
  getRectificationTypeTree(null);
  handleDelCancel();
};
const handleDelCancel = () => {
  isShowDelModal.value = false;
  delDataId.value = "";
};

/**
 * 标准
 * TODO:图片视频组件
 */

const videoAccept = ".avi,.mov,.mp4,.wmv";
const imageAccept = ".jpg,.png";
const picUrls = ref<fileObj[]>([]);
const videoUrls = ref<fileObj[]>([]);

const customRequestUpload = async (option: any) => {
  const fileType = option?.fileItem?.file?.type;
  const fileSize = option?.fileItem?.file?.size;
  if (!["image/jpeg", "image/png"].includes(fileType)) {
    return Message.error("只能上传 JPG/PNG 格式的图片!");
  }

  if (fileSize && fileSize / 1024 / 1024 > 10) {
    return Message.error("文件不能超过10M！");
  }
  const nowTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  let file = option.fileItem.file,
    fileName = option.fileItem.name;
  fileName = `${getFileName(fileName)}-${nowTime}.${getSuffix(fileName)}`;
  file = new File([file], fileName, { type: file.type });
  let objName = `CRM/${option.fileItem.name}`;
  ossStore
    .submit(objName, file, option.fileItem.uid)
    .then(async (res: any) => {
      await ossStore.setACL(objName, "public-read");
      const fileUrl = await ossStore.signatureUrl(objName);
      res.fileUrl = fileUrl ? `${fileUrl}`.split("?")[0] : "";
      console.log(res.fileUrl);
      res.fileId = option.fileItem.uid;
      res.fileName = option.fileItem.name;
      picUrls.value.push(res);
    })
    .catch(() => {});
};

const customRequestVideoUpload = async (option: any) => {
  loading.value = true;
  const fileType = option?.fileItem?.file?.type;
  const fileSize = option?.fileItem?.file?.size;
  if (!["video/quicktime", "video/x-ms-wmv", "video/avi", "video/mp4"].includes(fileType)) {
    return Message.error("只能上传 avi,mov,mp4,wmv 格式的视频!");
  }
  if (fileSize && fileSize / 1024 / 1024 > 200) {
    return Message.error("视频不能超过200M！");
  }
  const nowTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  let file = option.fileItem.file,
    fileName = option.fileItem.name;
  fileName = `${getFileName(fileName)}-${nowTime}.${getSuffix(fileName)}`;
  file = new File([file], fileName, { type: file.type });
  let objName = `CRM/${option.fileItem.name}`;
  ossStore
    .submit(objName, file, option.fileItem.uid)
    .then(async (res: any) => {
      await ossStore.setACL(objName, "public-read");
      const fileUrl = await ossStore.signatureUrl(objName);
      res.fileUrl = fileUrl ? `${fileUrl}`.split("?")[0] : "";
      res.fileId = option.fileItem.uid;
      res.fileName = option.fileItem.name;
      videoUrls.value.push(res);
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

const handelDelImg = (index: number) => {
  picUrls.value.splice(index, 1);
};
const handelDelVideo = (index: number) => {
  videoUrls.value.splice(index, 1);
};
const handelSave = async () => {
  const valid = await proxy.$refs.formRef?.validate();
  if (valid) return;
  const postData = {
    ...standardForm.value,
    picUrls: picUrls.value.map((item: fileObj) => item.fileUrl).join(","),
    picIds: picUrls.value.map((item: fileObj) => item.fileId).join(","),
    videoUrls: videoUrls.value.map((item: fileObj) => item.fileUrl).join(","),
    videoIds: videoUrls.value.map((item: fileObj) => item.fileId).join(","),
    packageIds: standardForm.value.packageIds.join(","),
    ruleIds: ruleIds.value
  };
  await addRectificationTypeStandard(standardId.value, postData);
  Message.success("保存成功");
};

/**
 * 视频预览
 */
const isPreview = ref(false);
const previewVideoUrl = ref("");
const handlePreview = (url: string) => {
  isPreview.value = true;
  previewVideoUrl.value = url;
};
// 新增责任人
const handleAddPerson = () => {
  standardForm.value.rulesVOList.push({ type: "" });
};
const handleDelete = (i: any, row: any) => {
  if (row.ruleId) ruleIds.value.push(row.ruleId);
  standardForm.value.rulesVOList.splice(i, 1);
  console.log(ruleIds.value);
};
getRectificationTypeTree(null);
const getAllRoleList = async () => {
  const { data } = await getAllRole();
  allRole.value = data || [];
};
getAllRoleList();
</script>

<style scoped lang="scss">
@import "index";

.rectification {
  height: 100%;
}

.template-container {
  padding: 16px 20px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
}

.template-button-container {
  width: 232px;
  display: flex;

  .button {
    width: 112px;
    height: 32px;
    color: #4e5969;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    border: 1px solid #e1e6ed;
    cursor: pointer;
  }

  .button:nth-of-type(1) {
    border-radius: 3px 0px 0px 3px;
  }

  .button:nth-of-type(2) {
    border-radius: 0px 3px 3px 0px;
  }

  .active {
    color: #007dff;
    border: 1px solid #007dff;
  }
}
</style>
